import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { Button, Card, Form, Input, message, Radio } from 'antd';
import { updateAvatar, currentUser, updateUserDetail } from './service';
import { EditOutlined } from '@ant-design/icons';
import TextArea from 'antd/lib/input/TextArea';
interface Props {}
/** 问题
 * 1. 页面加载 赋初值userInfo 会有延时问题 导致表单初始值赋不上
 * @returns
 *
 *
 *
 */
const BasicInfo: FC<Props> = () => {
  const [userInfo, setUserInfo] = useState();
  // 输入框是否显示
  const [inputStatu, setInputStatu] = useState(false);
  const onFinish = (values: any) => {
    console.log(values, 'values');
    updateUserDetail({ ...values, user_id: localStorage.getItem('user_id') }).then(res => {
      res.data === 'success' ? message.success('修改成功') : message.error('修改失败');
      setInputStatu(false);
      getUserInfo();
    });
  };
  const getUserInfo = () => {
    currentUser({ user_id: localStorage.getItem('user_id') }).then(res => {
      setUserInfo({ ...res.data });
    });
  };
  useEffect(() => {
    getUserInfo();
  }, []);
  return (
    <div className={style.container}>
      <div className="site-card-border-less-wrapper">
        <Card
          style={{height:'600px'}}
          title={(
            <span>
              基本信息
              <EditOutlined
                style={{ marginLeft: '10px' }}
                onClick={() => {
                  setInputStatu(true);
                }}
              />
            </span>
          )}
          bordered={false}
        >
          {inputStatu && (
            <Form
              name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              initialValues={userInfo}
              onFinish={onFinish}
              // onFinishFailed={onFinishFailed}
              autoComplete="off"
              // style={{ display: 'flex', width: '100%' }}
            >
              <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: 'Please input your username!' }]}
                style={{ height: '40px', width: '400px' }}
              >
                <Input width={400} className={style.circle} />
              </Form.Item>
              <Form.Item name="phone" label="电话" style={{ height: '40px', width: '400px' }}>
                <Input width={400} className={style.circle} />
              </Form.Item>
              <Form.Item name="email" label="E-mail" style={{ height: '40px', width: '400px' }}>
                <Input width={400} className={style.circle} />
              </Form.Item>
              <Form.Item name="job" label="职位" style={{ height: '40px', width: '400px' }}>
                <Input width={400} className={style.circle} />
              </Form.Item>
              <Form.Item
                name="tag"
                label="擅长"
                style={{ height: '40px', width: '400px', display: 'flex' }}
              >
                <Input width={400} placeholder="(请按逗号隔开)" className={style.circle} />
              </Form.Item>
              <Form.Item name="sex" label="性别" style={{ height: '40px', width: '400px' }}>
                <Radio.Group>
                  <Radio value={0}>男</Radio>
                  <Radio value={1}>女</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                name="signature"
                label="座右铭"
                style={{ height: '40px', width: '400px', display: 'flex' }}
              >
                <Input.TextArea maxLength={100} />
              </Form.Item>
              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: '10px' }}
                  shape="round"
                >
                  确定
                </Button>
                <Button
                  style={{ marginLeft: '10px' }}
                  onClick={() => {
                    setInputStatu(false);
                  }}
                  shape="round"
                >
                  取消
                </Button>
              </Form.Item>
            </Form>
          )}

          {!inputStatu && (
            <div
              onClick={() => {
                setInputStatu(true);
              }}
            >
              <div className={style.text_con}>
                <div>
                  <span className={style.title}>用户名:</span> {userInfo?.username}
                </div>
                <div>
                  <span className={style.title}>用户ID:</span> {userInfo?.user_id}
                </div>
                <div>
                  <span className={style.title}>职业: </span>{' '}
                  {userInfo?.job ? userInfo.job : '未填写'}
                </div>
                <div>
                  <span className={style.title}>电话:</span>{' '}
                  {userInfo?.phone ? userInfo.phone : '未填写'}
                </div>
                <div>
                  <span className={style.title}>Email: </span>{' '}
                  {userInfo?.email ? userInfo.email : '未填写'}
                </div>
                <div>
                  <span className={style.title}>擅长: </span>{' '}
                  {userInfo?.tag ? userInfo.tag : '未填写'}
                </div>
                <div>
                  <span className={style.title}>性别:</span> {userInfo?.sex === 0 && '男'}
                  {userInfo?.sex === 1 && '女'}
                  {/* {!userInfo?.sex  && '未设置'} */}
                </div>
                <div>
                  <span className={style.title}>座右铭:</span>{' '}
                  {userInfo?.signature ? userInfo.signature : '未填写'}
                </div>
              </div>
            </div>
          )}
        </Card>
      </div>
    </div>
  );
};

export default BasicInfo;
